[V0_FILE]markdown:file="README.md" # BadgeGenerator *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/clerk-v0/v0-imagegenerationflow-kl) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/VupG5OvLRjZ) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/clerk-v0/v0-imagegenerationflow-kl](https://vercel.com/clerk-v0/v0-imagegenerationflow-kl)** ## Build your app Continue building your app on: **[https://v0.app/chat/VupG5OvLRjZ](https://v0.app/chat/VupG5OvLRjZ)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/actions.ts" "use server" import { clerkClient } from "@clerk/nextjs/server" type GenerationMetadata = { requestId: string imageUrl: string createdAt: number } export async function getAllUsersGenerations(): Promise { try { const client = await clerkClient() const { data: users } = await client.users.getUserList({ limit: 100 }) const allGenerations: GenerationMetadata[] = [] for (const user of users) { const generations = (user.publicMetadata?.pixelArtGenerations as GenerationMetadata[]) || [] allGenerations.push(...generations) } return allGenerations.sort((a, b) => b.createdAt - a.createdAt) } catch (error) { console.error("[SERVER][v0] Failed to fetch all users' generations:", error) return [] } } [V0_FILE]typescriptreact:file="app/api/og/route.tsx" import { ImageResponse } from "next/og" import type { NextRequest } from "next/server" export const runtime = "edge" export async function GET(request: NextRequest) { try { const { searchParams } = new URL(request.url) const imageUrl = searchParams.get("imageUrl") const userName = searchParams.get("userName") || "Anonymous" if (!imageUrl) { return new Response("Missing imageUrl parameter", { status: 400 }) } return new ImageResponse(

{/* Image container - larger and more prominent */}

{/* eslint-disable-next-line @next/next/no-img-element */} Pixel art badge

{/* Creator info */}

Created by {userName}

, { width: 1200, height: 630, }, ) } catch (error) { console.error("Failed to generate OG image:", error) return new Response("Failed to generate image", { status: 500 }) } } [V0_FILE]typescript:file="app/gallery/actions.ts" "use server" import { clerkClient, currentUser } from "@clerk/nextjs/server" type GenerationMetadata = { requestId: string imageUrl: string createdAt: number } export async function deleteGeneration(requestId: string): Promise { const user = await currentUser() if (!user) throw new Error("Unauthorized") try { const client = await clerkClient() const fullUser = await client.users.getUser(user.id) const existingGenerations = (fullUser.publicMetadata.pixelArtGenerations as GenerationMetadata[]) || [] // Filter out the generation with the matching requestId const updatedGenerations = existingGenerations.filter((gen) => gen.requestId !== requestId) await client.users.updateUser(user.id, { publicMetadata: { ...fullUser.publicMetadata, pixelArtGenerations: updatedGenerations, }, }) console.log("[SERVER][v0] Deleted generation:", requestId) } catch (error) { console.error("[SERVER][v0] Failed to delete generation:", error) throw new Error(`Failed to delete generation: ${(error as any)?.message || String(error)}`) } } [V0_FILE]typescriptreact:file="app/gallery/page.tsx" import { UserButton } from "@clerk/nextjs" import { Sparkles, ArrowLeft } from "lucide-react" import Link from "next/link" import { getUserGenerations } from "@/app/studio/actions" import { UserGalleryClient } from "@/components/user-gallery-client" export default async function GalleryPage() { const generations = await getUserGenerations() return (

{/* Left: Back to Studio */} Back to Studio {/* Center: Gallery Title */}

Gallery

{/* Right: User Button */}

{/* Main Content */}

Your Creations

All your pixel art creations are saved here

) } [V0_FILE]css:file="app/globals.css" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* Using Geist Mono for both sans and mono */ --font-sans: "Geist Mono", "Geist Mono Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } /* Center Clerk modal content vertically */ .cl-modalBackdrop { align-items: center !important; } /* Clerk logo mask reveal animation - exact CSS from reference */ .animated { animation: lock-reveal 3s forwards ease-in-out; } @keyframes lock-reveal { 0% { mask-size: 50px; -webkit-mask-size: 50px; } 100% { mask-size: 16980px; -webkit-mask-size: 16980px; } } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { ClerkProvider } from "@clerk/nextjs" import { PUBLISHABLE_KEY } from "@/constants/keys" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Pixel Art Studio - AI-Powered Badge Generator", description: "Create stunning pixel art badges from your photos using AI. Transform any image into retro-style pixel art with background removal and instant generation.", generator: "v0.app", authors: [{ name: "Clerk" }], keywords: ["pixel art", "AI", "badge generator", "image transformation", "background removal", "retro art"], openGraph: { title: "Pixel Art Studio - AI-Powered Badge Generator", description: "Create stunning pixel art badges from your photos using AI", type: "website", url: "https://v0-clerk-fal.vercel.app", }, twitter: { card: "summary_large_image", title: "Pixel Art Studio - AI-Powered Badge Generator", description: "Create stunning pixel art badges from your photos using AI", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { SignedIn, SignedOut, SignIn, UserButton } from "@clerk/nextjs" import Link from "next/link" import { ClerkMaskReveal } from "@/components/clerk-mask-reveal" import { FloatingImages } from "@/components/floating-images" import { ParticleBackground } from "@/components/particle-background" import { useEffect, useState } from "react" import { getAllUsersGenerations } from "./actions" type GenerationMetadata = { requestId: string imageUrl: string createdAt: number } export default function Page() { const [generations, setGenerations] = useState([]) useEffect(() => { getAllUsersGenerations().then(setGenerations) }, []) return (

Pixel Art Badges

Create pixel-art badges for events, hackathons and meetups

Open Studio →

Duplicate on v0

See the code

) } [V0_FILE]typescriptreact:file="app/preview/[id]/ClientPreviewPage.tsx" "use client" import { notFound } from "next/navigation" import Image from "next/image" import Link from "next/link" import { Sparkles, Download, ArrowLeft, Copy, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { useState } from "react" type Props = { id: string url?: string eventName?: string userName?: string } export default function ClientPreviewPage({ id, url, eventName, userName = "Anonymous" }: Props) { const [copied, setCopied] = useState(false) if (!url) { notFound() } const shareUrl = typeof window !== "undefined" ? window.location.href : "" const encodedUrl = encodeURIComponent(shareUrl) const shareText = eventName ? `Check out ${userName}'s ${eventName} pixel art badge! 🎨✨ Create your own at Pixel Art Studio!` : `Check out ${userName}'s custom pixel art badge! 🎨✨ Create your own at Pixel Art Studio!` const encodedText = encodeURIComponent(shareText) const handleDownload = () => { const a = document.createElement("a") a.href = url a.download = `pixel-art-${id}.png` document.body.appendChild(a) a.click() document.body.removeChild(a) } const handleCopyUrl = async () => { try { await navigator.clipboard.writeText(shareUrl) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Failed to copy:", err) } } return (

{/* Header */}

Back to Home

Pixel Art Studio

{/* Main Content */}

{/* Badge Preview */}

{eventName && (

{eventName}

Created by {userName}

)}

{/* Actions */}

{/* Social Share Buttons */}

Share on Social Media

{/* Info */}

Create your own custom pixel art event badges in seconds. Perfect for conferences, hackathons, and community events.

) } [V0_FILE]typescriptreact:file="app/preview/[id]/page.tsx" import type { Metadata } from "next" import ClientPreviewPage from "./ClientPreviewPage" import { clerkClient } from "@clerk/nextjs/server" type Props = { params: Promise<{ id: string }> searchParams: Promise<{ url?: string; userId?: string; eventName?: string }> } export async function generateMetadata({ params, searchParams }: Props): Promise { const { id } = await params const { url, userId, eventName } = await searchParams let userName = "Anonymous" if (userId) { try { const client = await clerkClient() const user = await client.users.getUser(userId) userName = user.firstName || user.username || "Anonymous" } catch (error) { console.error("Failed to fetch user data:", error) } } const title = eventName ? `${eventName} - Pixel Art Badge by ${userName}` : `Pixel Art Badge by ${userName}` const description = `Check out ${userName}'s custom pixel art event badge! Create your own at Pixel Art Studio.` const baseUrl = process.env.NEXT_PUBLIC_APP_URL || "https://v0-clerk-fal.vercel.app" const ogImageUrl = url ? `${baseUrl}/api/og?imageUrl=${encodeURIComponent(url)}&userName=${encodeURIComponent(userName)}&eventName=${encodeURIComponent(eventName || "Pixel Art Badge")}` : undefined return { title, description, openGraph: { title, description, images: ogImageUrl ? [{ url: ogImageUrl, width: 1200, height: 630 }] : [], type: "website", siteName: "Pixel Art Studio", url: `${baseUrl}/preview/${id}`, }, twitter: { card: "summary_large_image", title, description, images: ogImageUrl ? [ogImageUrl] : [], site: "@pixelartstudio", creator: `@${userName}`, }, } } export default async function PreviewPage({ params, searchParams }: Props) { const { id } = await params const { url, eventName, userId } = await searchParams let userName = "Anonymous" if (userId) { try { const client = await clerkClient() const user = await client.users.getUser(userId) userName = user.firstName || user.username || "Anonymous" } catch (error) { console.error("Failed to fetch user data:", error) } } return } [V0_FILE]typescript:file="app/preview/actions.ts" "use server" import { clerkClient } from "@clerk/nextjs/server" type GenerationMetadata = { requestId: string imageUrl: string createdAt: number eventName?: string } export async function getBadgeByRequestId(requestId: string): Promise { try { // Since badges are stored in publicMetadata, we need to search through users // For now, we'll return null if not found // In production, you might want to store badges in a database instead return null } catch (error) { console.error("[SERVER][v0] Failed to fetch badge:", error) return null } } // Alternative: Store the userId in the requestId or use a separate mapping export async function getBadgeByRequestIdAndUserId( requestId: string, userId: string, ): Promise { try { const client = await clerkClient() const user = await client.users.getUser(userId) const generations = (user.publicMetadata.pixelArtGenerations as GenerationMetadata[]) || [] const badge = generations.find((gen) => gen.requestId === requestId) return badge || null } catch (error) { console.error("[SERVER][v0] Failed to fetch badge:", error) return null } } [V0_FILE]typescriptreact:file="app/sso-callback/page.tsx" import { AuthenticateWithRedirectCallback } from "@clerk/nextjs" export default function SSOCallback() { return } [V0_FILE]typescript:file="app/studio/actions.ts" "use server" import * as fal from "@fal-ai/serverless-client" import { clerkClient, currentUser } from "@clerk/nextjs/server" fal.config({ credentials: process.env.FAL_API_KEY, }) type GenerationResult = { imageUrl: string requestId: string } type GenerationError = { error: string details?: string } type GenerationMetadata = { requestId: string imageUrl: string createdAt: number eventName?: string } function base64ToFile(base64String: string, filename = "upload.jpg"): File { // Extract the base64 data and mime type const matches = base64String.match(/^data:([A-Za-z-+/]+);base64,(.+)$/) if (!matches || matches.length !== 3) { throw new Error("Invalid base64 string") } const mimeType = matches[1] const base64Data = matches[2] // Convert base64 to binary const binaryString = atob(base64Data) const bytes = new Uint8Array(binaryString.length) for (let i = 0; i < binaryString.length; i++) { bytes[i] = binaryString.charCodeAt(i) } // Create and return File object return new File([bytes], filename, { type: mimeType }) } export async function saveGenerationMetadata( imageUrl: string, requestId: string, eventName?: string, ): Promise<{ success: boolean; error?: string }> { try { const user = await currentUser() if (!user) { return { success: false, error: "Not authenticated" } } const client = await clerkClient() const fullUser = await client.users.getUser(user.id) const existingGenerations = (fullUser.publicMetadata?.pixelArtGenerations as GenerationMetadata[]) || [] const newGeneration: GenerationMetadata = { requestId, imageUrl, createdAt: Date.now(), ...(eventName && { eventName }), } await client.users.updateUser(user.id, { publicMetadata: { ...fullUser.publicMetadata, pixelArtGenerations: [newGeneration, ...existingGenerations], }, }) console.log("[SERVER][v0] Generation metadata saved successfully") return { success: true } } catch (error) { console.error("[SERVER][v0] Failed to save generation metadata:", error) return { success: false, error: String(error) } } } export async function getUserGenerations(): Promise { try { const user = await currentUser() if (!user) { console.log("[SERVER][v0] No user found, returning empty array") return [] } const client = await clerkClient() const fullUser = await client.users.getUser(user.id) const generations = (fullUser.publicMetadata?.pixelArtGenerations as GenerationMetadata[]) || [] console.log("[SERVER][v0] Found", generations.length, "generations for user") return generations } catch (error) { console.error("[SERVER][v0] Failed to get user generations:", error) return [] } } export async function generatePixelArt(imageBase64: string): Promise { try { console.log("[v0] Starting pixel art generation with qwen-image-edit") console.log("[v0] Converting base64 to File and uploading to fal.storage") const imageFile = base64ToFile(imageBase64, "user-photo.jpg") const uploadedImageUrl = await fal.storage.upload(imageFile) console.log("[v0] Image uploaded to fal.storage:", uploadedImageUrl) const prompt = "8-bit pixel art portrait, chest-up view. Simple solid background for easy cutout. Flat grayscale shading with four tones. Printed, cartoonish, and cute. Preserve facial structure. The character should fit entirely within the frame, without labels or text." console.log("[v0] Calling qwen-image-edit with uploaded image URL") const result = await fal.subscribe("fal-ai/qwen-image-edit", { input: { prompt, image_url: uploadedImageUrl, }, }) console.log("[v0] FAL result received") let imageUrl: string | undefined if (result.data?.images && Array.isArray(result.data.images) && result.data.images.length > 0) { imageUrl = result.data.images[0].url console.log("[v0] Found image in result.data.images") } else if (result.images && Array.isArray(result.images) && result.images.length > 0) { imageUrl = result.images[0].url console.log("[v0] Found image in result.images") } else if (result.data?.image?.url) { imageUrl = result.data.image.url console.log("[v0] Found image in result.data.image") } else if (result.image?.url) { imageUrl = result.image.url console.log("[v0] Found image in result.image") } if (!imageUrl) { console.error("[v0] Could not find image URL in result. Available keys:", Object.keys(result)) if (result.data) { console.error("[v0] result.data keys:", Object.keys(result.data)) } throw new Error("No images generated by FAL API") } console.log("[v0] Successfully generated pixel art image:", imageUrl) console.log("[v0] Removing background from pixel art") const bgRemovalResult = await fal.subscribe("fal-ai/birefnet/v2", { input: { image_url: imageUrl, }, logs: true, onQueueUpdate: (update) => { if (update.status === "IN_PROGRESS") { update.logs.map((log) => log.message).forEach(console.log) } }, }) let transparentImageUrl: string | undefined if (bgRemovalResult.data?.image?.url) { transparentImageUrl = bgRemovalResult.data.image.url console.log("[v0] Background removed successfully:", transparentImageUrl) } else if (bgRemovalResult.image?.url) { transparentImageUrl = bgRemovalResult.image.url console.log("[v0] Background removed successfully:", transparentImageUrl) } else { console.warn("[v0] Could not remove background, using original image") transparentImageUrl = imageUrl } const finalImageUrl = transparentImageUrl || imageUrl console.log("[v0] Final image URL:", finalImageUrl) // Save generation metadata const saveMetadataResult = await saveGenerationMetadata(finalImageUrl, result.requestId || `gen-${Date.now()}`) if (!saveMetadataResult.success) { console.error("[v0] Failed to save generation metadata:", saveMetadataResult.error) } return { imageUrl: finalImageUrl, requestId: result.requestId || `gen-${Date.now()}` } } catch (error) { console.error("[v0] Pixel art generation failed") console.error("[v0] Error type:", typeof error) console.error("[v0] Error constructor:", error?.constructor?.name) const errorDetails = JSON.stringify(error, Object.getOwnPropertyNames(error), 2) console.error("[v0] Full error object:", errorDetails) if (error && typeof error === "object") { console.error("[v0] Error.name:", (error as any).name) console.error("[v0] Error.message:", (error as any).message) console.error("[v0] Error.status:", (error as any).status) console.error("[v0] Error.body:", (error as any).body) console.error("[v0] Error.stack:", (error as any).stack) } const errorMessage = (error as any)?.message || String(error) return { error: errorMessage } } } [V0_FILE]typescriptreact:file="app/studio/page.tsx" "use client" import type React from "react" import Image from "next/image" import { useState, useTransition, useRef, useEffect, useMemo } from "react" import { motion, AnimatePresence } from "framer-motion" import { generatePixelArt, getUserGenerations } from "./actions" import { UserButton, useUser } from "@clerk/nextjs" import { Sparkles, Camera, Upload, Grid3x3, Home, X, ImageIcon, Download, RotateCcw, History, Settings, } from "lucide-react" import Link from "next/link" import { ClerkMaskReveal } from "@/components/clerk-mask-reveal" import { BadgePreview } from "@/components/badge-preview" import { toPng } from "html-to-image" import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" const MotionImage = motion(Image) type GenerationMetadata = { requestId: string imageUrl: string createdAt: number } export default function StudioPage() { const { user } = useUser() const [isClient, setIsClient] = useState(false) useEffect(() => { setIsClient(true) }, []) const [eventName, setEventName] = useState("CLERK") const [eventDate, setEventDate] = useState("SAN FRANCISCO") const [badgeNumber, setBadgeNumber] = useState("0001") const [backgroundColor, setBackgroundColor] = useState("#262629") const [backgroundImage, setBackgroundImage] = useState("/clerk-default.png") const [logoFile, setLogoFile] = useState(null) const [logoUrl, setLogoUrl] = useState("/clerk-logo.png") const [backgroundFile, setBackgroundFile] = useState(null) const [isInvert, setIsInvert] = useState(false) const [imageFilter, setImageFilter] = useState("sketch") const [imageScale, setImageScale] = useState(100) const [imagePositionX, setImagePositionX] = useState(50) const [imagePositionY, setImagePositionY] = useState(50) const [imageFile, setImageFile] = useState(null) const [previewUrl, setPreviewUrl] = useState(null) const [resultUrl, setResultUrl] = useState(null) const [isPending, startTransition] = useTransition() const [isGenerating, setIsGenerating] = useState(false) const [showCameraModal, setShowCameraModal] = useState(false) const [showGalleryModal, setShowGalleryModal] = useState(false) const [stream, setStream] = useState(null) const videoRef = useRef(null) const canvasRef = useRef(null) const cameraInputRef = useRef(null) const uploadInputRef = useRef(null) const logoInputRef = useRef(null) const backgroundInputRef = useRef(null) const badgeRef = useRef(null) const [generationError, setGenerationError] = useState(null) const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [galleryGenerations, setGalleryGenerations] = useState([]) const [isLoadingGallery, setIsLoadingGallery] = useState(false) const openCamera = async () => { try { const mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, audio: false, }) setStream(mediaStream) setShowCameraModal(true) // Wait for video element to be ready setTimeout(() => { if (videoRef.current) { videoRef.current.srcObject = mediaStream } }, 100) } catch (error) { console.error("[v0] Camera access error:", error) // Fallback to file input on desktop if camera fails cameraInputRef.current?.click() } } const capturePhoto = () => { if (!videoRef.current || !canvasRef.current) return const video = videoRef.current const canvas = canvasRef.current canvas.width = video.videoWidth canvas.height = video.videoHeight const ctx = canvas.getContext("2d") if (ctx) { ctx.drawImage(video, 0, 0) canvas.toBlob( (blob) => { if (blob) { const file = new File([blob], "camera-photo.jpg", { type: "image/jpeg", }) const dataUrl = canvas.toDataURL("image/jpeg") closeCamera() setGenerationError(null) const img = document.createElement("img") img.onload = () => { console.log("[v0] Camera image loaded, dimensions:", img.width, "x", img.height) if (img.width < 256 || img.height < 256) { const errorMsg = `Image too small: ${img.width}x${img.height}px. Minimum size is 256x256px.` console.log("[v0] Camera validation failed:", errorMsg) setGenerationError(errorMsg) setImageFile(null) setPreviewUrl(null) return } console.log("[v0] Camera validation passed, starting generation...") setImageFile(file) setPreviewUrl(dataUrl) setIsGenerating(true) const reader = new FileReader() reader.onloadend = () => { const base64String = reader.result as string startTransition(async () => { try { console.log("[v0] Calling generatePixelArt from camera...") const result = await generatePixelArt(base64String) console.log("[v0] Camera generation result:", result) if ("error" in result) { console.log("[v0] Camera generation returned error:", result.error) setGenerationError(result.error) } else { console.log("[v0] Camera generation successful") setResultUrl(result.imageUrl) } } catch (error) { console.error("[v0] Camera generation error caught:", error) setGenerationError((error as Error).message || "Failed to generate pixel art. Please try again.") } finally { console.log("[v0] Camera generation complete") setIsGenerating(false) } }) } reader.readAsDataURL(file) } img.onerror = () => { console.error("[v0] Failed to load captured image") setGenerationError("Failed to load captured image. Please try again.") } img.src = dataUrl } }, "image/jpeg", 0.95, ) } } const closeCamera = () => { if (stream) { stream.getTracks().forEach((track) => track.stop()) setStream(null) } setShowCameraModal(false) } const handleSelectFromGallery = (imageUrl: string) => { setResultUrl(imageUrl) setShowGalleryModal(false) } const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file && file.type.startsWith("image/")) { console.log("[v0] File selected:", file.name, file.size, "bytes") e.target.value = "" setGenerationError(null) const reader = new FileReader() reader.onloadend = () => { console.log("[v0] File read complete, validating dimensions...") const base64String = reader.result as string const img = document.createElement("img") img.onload = () => { console.log("[v0] Image loaded, dimensions:", img.width, "x", img.height) if (img.width < 256 || img.height < 256) { const errorMsg = `Image too small: ${img.width}x${img.height}px. Minimum size is 256x256px.` console.log("[v0] Validation failed:", errorMsg) setGenerationError(errorMsg) setImageFile(null) setPreviewUrl(null) return } console.log("[v0] Validation passed, starting generation...") setImageFile(file) setPreviewUrl(base64String) setIsGenerating(true) startTransition(async () => { try { console.log("[v0] Calling generatePixelArt...") const result = await generatePixelArt(base64String) console.log("[v0] Generation result:", result) if ("error" in result) { console.log("[v0] Generation returned error:", result.error) setGenerationError(result.error) } else { console.log("[v0] Generation successful, saving metadata...") setResultUrl(result.imageUrl) } } catch (error) { console.error("[v0] Generation error caught:", error) setGenerationError((error as Error).message || "Failed to generate pixel art. Please try again.") } finally { console.log("[v0] Generation complete, setting isGenerating to false") setIsGenerating(false) } }) } img.onerror = () => { console.error("[v0] Failed to load image") setGenerationError("Failed to load image. Please try a different file.") } img.src = base64String } reader.onerror = () => { console.error("[v0] FileReader error") setGenerationError("Failed to read file. Please try again.") } reader.readAsDataURL(file) } } const handleLogoChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file && file.type.startsWith("image/")) { setLogoFile(file) const reader = new FileReader() reader.onloadend = () => { setLogoUrl(reader.result as string) } reader.readAsDataURL(file) e.target.value = "" } } const handleBackgroundChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file && file.type.startsWith("image/")) { setBackgroundFile(file) const reader = new FileReader() reader.onloadend = () => { setBackgroundImage(reader.result as string) } reader.readAsDataURL(file) e.target.value = "" } } const handleDownloadBadge = async () => { if (!badgeRef.current) return try { // Capture the visible badge element with all filters and styles const dataUrl = await toPng(badgeRef.current, { quality: 1, pixelRatio: 2, cacheBust: true, includeQueryParams: true, filter: (node) => { // Exclude any helper elements that may interfere if (node.classList) { return !node.classList.contains("badge-helper") } return true }, }) // Download the image const a = document.createElement("a") a.href = dataUrl a.download = `badge-${badgeNumber}-${Date.now()}.png` document.body.appendChild(a) a.click() document.body.removeChild(a) } catch (error) { console.error("[v0] Download failed:", error) } } const getFilterStyle = () => { switch (imageFilter) { case "grayscale": return "grayscale(100%)" case "blue": return "url(#duotone-blue)" case "sketch": return "grayscale(100%) contrast(150%) brightness(110%)" default: return "none" } } const applyPreset = (preset: string) => { if (preset === "clerk") { setEventName("CLERK") setEventDate("SAN FRANCISCO") setBackgroundColor("#262629") setBackgroundImage("/clerk-default.png") setImageFilter("sketch") setIsInvert(false) setLogoUrl("/clerk-logo.png") } else if (preset === "neutral") { setEventName("NEUTRAL") setEventDate("COLOR STYLE") setBackgroundColor("#491d26") setBackgroundImage(null) setImageFilter("none") setIsInvert(false) } else if (preset === "ship-ai") { setEventName("SHIP AI 25") setEventDate("IN-PERSON EDT.") setBackgroundColor("#000000") setBackgroundImage("/black-default.jpg") setImageFilter("grayscale") setIsInvert(true) setLogoUrl("/vercel-logo.svg") } else if (preset === "nextjs-conf") { setEventName("NEXT.JS CONF 25") setEventDate("IN-PERSON EDT.") setBackgroundColor("#4275B2") setBackgroundImage("/blue-default.jpg") setImageFilter("blue") setIsInvert(false) } } const AdvancedSettingsContent = useMemo(() => { return (

{/* Quick Presets - spans both columns on desktop */}

Quick Presets

{/* Desktop: 2x2 Grid of Buttons */}

{/* Mobile: Dropdown */}

{/* Event Details */}

Event Details

Event Name setEventName(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 font-mono text-xs text-white placeholder-white/30 backdrop-blur-sm focus:border-white/20 focus:outline-none" placeholder="SHIP AI 25" />

Event Date/Location setEventDate(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 font-mono text-xs text-white placeholder-white/30 backdrop-blur-sm focus:border-white/20 focus:outline-none" placeholder="IN-PERSON EDT." />

Badge Number setBadgeNumber(e.target.value)} className="w-full rounded-lg border border-white/10 bg-white/5 px-3 py-2 font-mono text-xs text-white placeholder-white/30 backdrop-blur-sm focus:border-white/20 focus:outline-none" placeholder="0001" />

Background Color

setBackgroundColor(e.target.value)} className="h-10 w-10 cursor-pointer rounded-lg border border-white/10 bg-white/5" /> setBackgroundColor(e.target.value)} className="flex-1 rounded-lg border border-white/10 bg-white/5 px-2 py-2 font-mono text-[10px] text-white placeholder-white/30 backdrop-blur-sm focus:border-white/20 focus:outline-none" />

{/* Image Styling */}

Image Styling

Image Style {/* Desktop: 2x2 Grid of Buttons */}

{/* Mobile: Dropdown */}

Image Zoom: {imageScale}% setImageScale(Number(e.target.value))} className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-white/10 accent-white" />

Position X: {imagePositionX}% setImagePositionX(Number(e.target.value))} className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-white/10 accent-white" />

Position Y: {imagePositionY}% setImagePositionY(Number(e.target.value))} className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-white/10 accent-white" />

{/* Assets - spans both columns on desktop */}

Assets

Event Logo

Background Image

setIsInvert(e.target.checked)} className="h-4 w-4 cursor-pointer rounded border-white/10 bg-white/5 text-white accent-white" /> Invert Logo

) }, [ eventName, eventDate, badgeNumber, backgroundColor, backgroundImage, imageFilter, imageScale, imagePositionX, imagePositionY, logoFile, backgroundFile, isInvert, ]) const resetBadgeConfig = () => { setEventName("CLERK") setEventDate("SAN FRANCISCO") setBadgeNumber("0001") setBackgroundColor("#262629") setBackgroundImage("/clerk-default.png") setImageFilter("sketch") setIsInvert(false) setImageScale(100) setImagePositionX(50) setImagePositionY(50) setLogoUrl("/clerk-logo.png") } const handleOpenGallery = async () => { setShowGalleryModal(true) setIsLoadingGallery(true) try { const generations = await getUserGenerations() setGalleryGenerations(generations) } catch (error) { console.error("[v0] Failed to load gallery:", error) } finally { setIsLoadingGallery(false) } } return ( {/* SVG Filters */}

{/* Header */}

Home

Studio

Duplicate on v0

Gallery

{/* Left Sidebar - Desktop Only (lg+) */} {/* Main Content Area */}

{/* Toolbar */}

{/* Desktop: Horizontal layout with left/right groups */}

{/* Left: Upload Actions */}

{/* Right: Quick Actions */}

{/* Download Button */}

{/* Mobile: Balanced 2-column grid */}

Badge Settings Customize every detail of your pixel art badge

{AdvancedSettingsContent}

{/* Badge Preview Area */}

{generationError && (

Generation Failed

{generationError}

)}

{imageFile && (

{isGenerating ? "Generating pixel art..." : `Photo: ${imageFile.name}`}

)}

{/* Camera Modal */} {showCameraModal && ( e.stopPropagation()} >

)} {/* Gallery Selection Modal */} {showGalleryModal && ( setShowGalleryModal(false)} > e.stopPropagation()} >

Select from Gallery

Choose a previously generated image

{isLoadingGallery ? (

Loading your gallery...

) : galleryGenerations.length > 0 ? (

{galleryGenerations .sort((a, b) => b.createdAt - a.createdAt) .map((gen) => ( handleSelectFromGallery(gen.imageUrl)} className="group relative aspect-square overflow-hidden rounded-lg border border-white/10 bg-white/5 transition-all hover:border-white/30" > Generated pixel art

{new Date(gen.createdAt).toLocaleDateString()}

))}

) : (

No images yet

Generate some pixel art first to see them here

)}

) } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/badge-preview.tsx" "use client" import type React from "react" import { motion } from "framer-motion" import Image from "next/image" import { useState, useEffect } from "react" type BadgePreviewProps = { eventName: string eventDate: string badgeNumber: string pixelArtUrl: string | null logoUrl: string | null isInvert: boolean isGenerating: boolean backgroundColor: string backgroundImage?: string | null imageFilter: string imageScale: number imagePositionX: number imagePositionY: number } export function BadgePreview({ eventName, eventDate, badgeNumber, pixelArtUrl, logoUrl, isInvert, isGenerating, backgroundColor, backgroundImage, imageFilter, imageScale, imagePositionX, imagePositionY, }: BadgePreviewProps) { const [isClient, setIsClient] = useState(false) const [isImageLoading, setIsImageLoading] = useState(false) const [loadedImageUrl, setLoadedImageUrl] = useState(null) const [rotateX, setRotateX] = useState(0) const [rotateY, setRotateY] = useState(0) useEffect(() => { setIsClient(true) }, []) useEffect(() => { if (pixelArtUrl && pixelArtUrl !== loadedImageUrl) { setIsImageLoading(true) } }, [pixelArtUrl, loadedImageUrl]) const getFilterStyle = () => { switch (imageFilter) { case "grayscale": return "grayscale(100%)" case "blue": return "url(#duotone-blue-badge)" case "sketch": return "grayscale(100%) contrast(150%) brightness(110%)" default: return "none" } } const getBackgroundPattern = () => { if (!isClient) return null if (backgroundColor === "#000000" || backgroundColor === "#000") { return (

{[...Array(40)].map((_, i) => (

0.6 ? "1.5%" : "0.8%", opacity: Math.random() * 0.4 + 0.1, }} /> ))}

) } if ( backgroundColor.includes("15548E") || backgroundColor.includes("#15548E") || backgroundColor.includes("1a3a52") || backgroundColor.includes("#1a3a52") ) { return (

{[...Array(256)].map((_, i) => (

0.5 ? 0.4 : 0.15, }} /> ))}

) } return null } const handleMouseMove = (e: React.MouseEvent) => { const rect = e.currentTarget.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top const centerX = rect.width / 2 const centerY = rect.height / 2 const rotateXValue = ((y - centerY) / centerY) * -10 const rotateYValue = ((x - centerX) / centerX) * 10 setRotateX(rotateXValue) setRotateY(rotateYValue) } const handleMouseLeave = () => { setRotateX(0) setRotateY(0) } return (

{eventName || "SHIP AI 25"}

{eventDate || "IN-PERSON EDT."}

GEN MT

{badgeNumber || "0000"}

{/* Body section with image */}

{backgroundImage && ( Background pattern

)} {!backgroundImage && getBackgroundPattern()} {isGenerating ? (

Generating pixel art...

) : pixelArtUrl ? (

{isImageLoading && (

Loading image...

)}

{ setIsImageLoading(false) setLoadedImageUrl(pixelArtUrl) }} />

) : (

Upload or capture
a photo to generate
pixel art

)} {/* Logo */}

{logoUrl ? ( Event logo

) : (

LOGO

)}

) } [V0_FILE]typescriptreact:file="components/clerk-mask-reveal.tsx" "use client" import type React from "react" import { useEffect, useState } from "react" export function ClerkMaskReveal({ children, onAnimationComplete, }: { children: React.ReactNode onAnimationComplete?: () => void }) { const [isAnimated, setIsAnimated] = useState(false) useEffect(() => { setIsAnimated(false) const timer = setTimeout(() => setIsAnimated(true), 50) return () => { clearTimeout(timer) } }, []) useEffect(() => { if (isAnimated && onAnimationComplete) { const timer = setTimeout(() => { onAnimationComplete() }, 5900) return () => clearTimeout(timer) } }, [isAnimated, onAnimationComplete]) return ( <>

{children}

) } [V0_FILE]typescriptreact:file="components/floating-images.tsx" "use client" import { useEffect, useState } from "react" import Image from "next/image" import { motion, AnimatePresence } from "framer-motion" type GenerationMetadata = { requestId: string imageUrl: string createdAt: number } type FloatingImagesProps = { generations: GenerationMetadata[] } const FIXED_POSITIONS = [ { x: -30, y: -25, rotation: -8 }, // Top-left { x: 30, y: -25, rotation: 8 }, // Top-right { x: -30, y: 0, rotation: -5 }, // Middle-left { x: 30, y: 0, rotation: 5 }, // Middle-right { x: -30, y: 25, rotation: 6 }, // Bottom-left { x: 30, y: 25, rotation: -6 }, // Bottom-right ] const IMAGE_FILTERS = ["none", "grayscale", "sketch", "blue"] as const type BadgeStyle = { backgroundColor: string backgroundImage?: string | null filter: (typeof IMAGE_FILTERS)[number] logoUrl: string isInvert: boolean } // Preset badge styles to showcase different configurations const BADGE_STYLES: BadgeStyle[] = [ { backgroundColor: "#262629", backgroundImage: "/clerk-default.png", filter: "sketch", logoUrl: "/clerk-logo.png", isInvert: false, }, { backgroundColor: "#000000", backgroundImage: "/black-default.jpg", filter: "grayscale", logoUrl: "/vercel-logo.svg", isInvert: true, }, { backgroundColor: "#4275B2", backgroundImage: "/blue-default.jpg", filter: "blue", logoUrl: "/next-logo.svg", isInvert: false, }, ] const getFilterStyle = (filter: (typeof IMAGE_FILTERS)[number]) => { switch (filter) { case "grayscale": return "grayscale(100%)" case "sketch": return "grayscale(100%) contrast(150%) brightness(110%)" case "blue": return "url(#duotone-blue-floating)" default: return "none" } } export function FloatingImages({ generations }: FloatingImagesProps) { const VISIBLE_COUNT = 6 const [startIndex, setStartIndex] = useState(0) const [filterRotation, setFilterRotation] = useState(0) useEffect(() => { if (generations.length === 0) return const interval = setInterval(() => { setStartIndex((current) => { const next = current + 1 if (next + VISIBLE_COUNT > generations.length) return 0 return next }) setFilterRotation((current) => (current + 1) % IMAGE_FILTERS.length) }, 4000) return () => clearInterval(interval) }, [generations.length]) if (generations.length === 0) return null return (

{FIXED_POSITIONS.map((pos, positionIndex) => { const genIndex = (startIndex + positionIndex) % generations.length const gen = generations[genIndex] if (!gen) return null const badgeStyleIndex = (positionIndex + filterRotation) % BADGE_STYLES.length const badgeStyle = BADGE_STYLES[badgeStyleIndex] return (

{/* Badge Container with Acrylic Effect */}

{/* Inner Content */}

{/* Badge Body with Background */}

{/* Background Image */} {badgeStyle.backgroundImage && (

)} {/* Pixel Art Image */}

{/* Logo Overlay */}

) })}

) } [V0_FILE]typescriptreact:file="components/image-vortex.tsx" "use client" import { useEffect, useRef, useState } from "react" type GenerationMetadata = { requestId: string imageUrl: string prompt: string createdAt: number } type Particle = { angle: number radius: number z: number size: number imageIndex: number opacity: number } type ImageVortexProps = { generations: GenerationMetadata[] } export function ImageVortex({ generations }: ImageVortexProps) { const canvasRef = useRef(null) const [images, setImages] = useState([]) const scrollOffset = useRef(0) const targetScrollOffset = useRef(0) const particles = useRef([]) useEffect(() => { if (generations.length === 0) return const loadedImages: HTMLImageElement[] = [] let loadedCount = 0 generations.forEach((gen, index) => { const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { loadedImages[index] = img loadedCount++ if (loadedCount === generations.length) { setImages(loadedImages) } } img.onerror = () => { loadedCount++ if (loadedCount === generations.length) { setImages(loadedImages) } } img.src = gen.imageUrl }) }, [generations]) useEffect(() => { if (images.length === 0) return const particleCount = 100 const newParticles: Particle[] = [] for (let i = 0; i < particleCount; i++) { const z = (i / particleCount) * 2000 const spiralTurns = 3 const angle = (i / particleCount) * Math.PI * 2 * spiralTurns const radius = 150 + Math.sin(z * 0.01) * 50 newParticles.push({ angle, radius, z, size: 150 + Math.random() * 100, imageIndex: Math.floor(Math.random() * images.length), opacity: 1, }) } particles.current = newParticles }, [images]) useEffect(() => { const handleWheel = (e: WheelEvent) => { e.preventDefault() targetScrollOffset.current += e.deltaY * 0.5 } window.addEventListener("wheel", handleWheel, { passive: false }) return () => window.removeEventListener("wheel", handleWheel) }, []) useEffect(() => { const canvas = canvasRef.current if (!canvas || images.length === 0) return const ctx = canvas.getContext("2d") if (!ctx) return const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) let animationId: number const animate = () => { scrollOffset.current += (targetScrollOffset.current - scrollOffset.current) * 0.1 ctx.fillStyle = "rgba(0, 0, 0, 0.05)" ctx.fillRect(0, 0, canvas.width, canvas.height) const centerX = canvas.width / 2 const centerY = canvas.height * 0.7 const sortedParticles = [...particles.current].sort((a, b) => { const aZ = (a.z - scrollOffset.current) % 2000 const bZ = (b.z - scrollOffset.current) % 2000 return bZ - aZ }) sortedParticles.forEach((particle) => { let z = (particle.z - scrollOffset.current) % 2000 if (z < 0) z += 2000 const perspective = 800 const scale = perspective / (perspective + z) const x = centerX + Math.cos(particle.angle) * particle.radius * scale const y = centerY + Math.sin(particle.angle) * particle.radius * scale * 0.6 - z * 0.3 const size = particle.size * scale const opacity = Math.max(0, Math.min(1, (2000 - z) / 1500)) if (size > 1 && opacity > 0.1) { ctx.save() ctx.globalAlpha = opacity * 0.95 const img = images[particle.imageIndex] if (img && img.complete) { ctx.translate(x, y) const rotation = particle.angle + z * 0.002 ctx.rotate(rotation) const skewX = Math.sin(particle.angle) * 0.2 const skewY = Math.cos(particle.angle) * 0.2 ctx.transform(1, skewY, skewX, 1, 0, 0) ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.8})` ctx.lineWidth = 3 ctx.strokeRect(-size / 2, -size / 2, size, size) ctx.drawImage(img, -size / 2, -size / 2, size, size) } ctx.restore() } }) animationId = requestAnimationFrame(animate) } animate() return () => { cancelAnimationFrame(animationId) window.removeEventListener("resize", resizeCanvas) } }, [images]) return

Gallery

Your Creations

Pixel Art Badges

{eventName}

Share on Social Media

Quick Presets

Event Details

Image Styling

Assets

Studio

Generation Failed

Select from Gallery

No images yet

{eventName || "SHIP AI 25"}

No creations yet

Delete Creation?

No creations yet

Delete Creation?

About

Tags

Share

About

Tags

Share

More from clerk

More Templates Like This

About

Tags

Share

About

Tags

Share

More from clerk

More Templates Like This